<template>
  <el-dialog v-if="visible" :title="info.title" :visible.sync="visible" append-to-body center width="960px" :before-close="handleCancel">
    <el-row>
      <el-col :span="17">
        <el-row>
          <el-col :span="24">
            <el-col class="p10 pb20 top-item-title" :span="3">申请人</el-col>
            <el-col class="p10 pb20 top-item-content" :span="4">{{ this.form.nickname }}</el-col>
            <el-col class="p10 pb20 top-item-title" :span="3">审批类型</el-col>
            <el-col class="p10 pb20 top-item-content" :span="5">{{ this.form.value }}</el-col>
            <el-col class="p10 pb20 top-item-title" :span="3">申请时间</el-col>
            <el-col class="p10 pb20 top-item-content" :span="6">{{ this.form.create_time }}</el-col>
          </el-col>
          <el-col :span="24">
            <el-form label-suffix=":" label-width="120px">
              <el-row class="f-body">
                <el-col v-for="(item, index) in forms" :key="index" :span="24">
                  <el-form-item class="f-item" :label="item.t">
                    {{ item.v }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
          <el-col v-if="fileList.length > 0" :span="24">
            <el-table class="search-table" :data="fileList" border fit highlight-current-row style="width: 100%;">
              <el-table-column label="序号" align="center" width="56px">
                <template slot-scope="{$index}">
                  {{ $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="文件名称" min-width="200px">
                <template slot-scope="{row}">
                  <a href="javascript:void(0)" class="tba" target="_blank" @click="handleWV(row)">{{ row.file_name }}</a>
                </template>
              </el-table-column>
              <el-table-column label="下载" align="center" width="90px">
                <template slot-scope="{row}">
                  <a :href="row.url" class="tba" target="_blank">下 载</a>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col v-if="form.tables && form.tables != ''" class="mt20" :span="24">
            <VerifyTables :data="form.tables" />
          </el-col>
          <el-col v-if="info.type !== 'view'" class="mt20" :span="24">
            <el-form ref="formDate" label-suffix=":" label-width="100px" :model="form">
              <el-form-item label="备注" prop="reason">
                <el-input v-model="form.reason" type="textarea" :rows="4" size="small" clearable style="width: 100%" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <VerifySteps :data="form" />
      </el-col>
    </el-row>
    <el-row v-if="info.type !== 'view'">
      <el-col :span="24">
        <div class="fr mt10">
          <el-button size="small" @click="handleCancel()">取 消</el-button>
          <el-button :disabled="checkButton(0)" type="danger" size="small" @click="handleBefore(0)">驳 回</el-button>
          <el-button :disabled="checkButton(3)" type="warning" size="small" @click="handleBefore(3)">退 回</el-button>
          <el-button :disabled="checkButton(1)" type="primary" size="small" @click="handleBefore(1)">同 意</el-button>
          <el-button
            :disabled="checkButton(4)"
            type="primary"
            size="small"
            @click="handleDialog({...{'id': form.lpai_id}, ...{dTitle: '审批转签', dType: 'edit', dField: dField}})"
          >转 签</el-button>
        </div>
      </el-col>
    </el-row>
    <VerifyLF ref="dialog" :get-data="refreshParent" :info="dialog" />
  </el-dialog>
</template>

<script>
import { reject, agree, back } from '@/api/approval/approve'
import VerifySteps from '@/myComponents/VerifySteps'
import VerifyTables from '../../verify-tables'
import VerifyLF from './verify-l-f-dialog'
import form from '@/utils/form'

export default {
  components: { VerifySteps, VerifyTables, VerifyLF },
  extends: form,
  data() {
    return {
      reqUpd: {
        default: null,
        type: Function
      },
      dField: ['id'],
      fileList: [],
      forms: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$set(this, 'fileList', [])
        this.$set(this, 'forms', [])
        this.form = this.info.edit
        this.init()
      }
    }
  },
  mounted() {
  },
  methods: {
    checkButton(e) {
      if (e === 3) {
        if (this.form.state !== 2) return true
      } else {
        if (this.form.state === 3 ||
        this.form.lpai_state === 0 ||
        this.form.lpai_state === 1 ||
        this.form.lpai_state === 3 ||
        this.form.lpai_state === 4) return true
      }

      return false
    },
    init() {
      const files = this.form.files
      if (files && files !== '') this.fileList = JSON.parse(files)
      const forms = this.form.forms
      if (forms && forms !== '') this.forms = JSON.parse(forms)
    },
    handleWV(row) {
      const url = row.url
      const ss = url.split('.')
      const s = ss[ss.length - 1]
      if (s.toUpperCase() === 'PDF') {
        window.open(url, '_blank')
      } else if (s.toUpperCase() === 'XLSX' || s.toUpperCase() === 'XLS' || s.toUpperCase() === 'DOCX' || s.toUpperCase() === 'DOC') {
        window.open(
          'https://view.officeapps.live.com/op/view.aspx?src=' + row.url,
          '_blank'
        )
      } else {
        window.open(row.url, '_blank')
      }
    },
    handleBefore(e) {
      const data = {}
      data.state = e
      data.reason = this.form.reason
      data.id = this.form.lpai_id

      if (e === 0) {
        this.$set(this, 'reqUpd', reject)
      } else if (e === 1) {
        this.$set(this, 'reqUpd', agree)
      } else if (e === 3) {
        this.$set(this, 'reqUpd', back)
      } else {
        return
      }

      this.$confirm('此操作将修改审批流程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.handleEdit(data)
      })
    }
  }
}
</script>

<style scoped>
.top-item-title{
  font-weight: 600;
}
.f-body{
  border-top: 1px solid #dfe6ec;
  margin-bottom: 20px;
}
.f-item {
  margin-bottom: 0;
  border: 1px solid #dfe6ec;
  border-top: 0;
}
</style>>
